<template>
  <div>
    <div class="box chart-box intro-y">
      <div class="title text-center p-3">中长期价格测算</div>
      <chart :tableData="tableData"/>
<!--      <el-upload-->
<!--          class="upload-demo absolute right-5 top-3 cursor-pointer text-primary z-50 import"-->
<!--          :on-change="handleUpload"-->
<!--          accept="xls,xlsx"-->
<!--          :auto-upload="false"-->
<!--          :multiple="false"-->
<!--          :limit="1"-->
<!--          drag>-->
<!--        <el-button type="primary" plain>导入-->
<!--        </el-button>-->
<!--      </el-upload>-->
    </div>
    <!-- <div class="box intro-y grid 2xl:grid-cols-3 sm:grid-cols-1 gap-5">
      <el-button type="primary" plain
        class="absolute right-5 top-3 cursor-pointer text-primary z-50 import">导入</el-button>
      <div class="sm:col-span-1 2xl:col-span-1">
        <el-calendar v-model="selDate">
          <template #date-cell="{ data }">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(1).join('-') }}
              {{ data.isSelected ? '✔️' : '' }}
            </p>
          </template>
</el-calendar>
</div>
<div class="sm:col-span-1 2xl:col-span-2">
  <div class="title text-center p-3">中长期价格测算</div>
  <chart :tableData="tableData" />
</div>
</div> -->
    <div class="box mt-5 border-t intro-y">
      <div class="report-chart p-3">
        <wTable :tableData="tableData"/>
      </div>
    </div>


    <tableDialog :tableData="dialogData" :showDialog="showDialog" :tableHeaders="tableHeaders" @close="close"/>
  </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import wTable from "./wTable.vue"
import chart from "./chart.vue"
import * as $api from "@/api/api.js";
import dayjs from "dayjs";
import * as XLSX from 'xlsx'
import tableDialog from "./tableDialog.vue"

const tableData = ref([]);
const dialogData = ref([]);
const showDialog = ref(false);
// 从数据的第一条记录中提取字段名
const tableHeaders = ref(Object.keys(dialogData.value[0] || {}));
const selDate = ref(new Date());

onMounted(() => {
  getDayData();
});

//读取excel文件
const readFile = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file.raw); // 确保读取为 ArrayBuffer
    reader.onload = (e) => {
      if (e.target && e.target.result instanceof ArrayBuffer) {
        console.log("ArrayBuffer length:", e.target.result.byteLength);
        resolve(e.target.result); // 返回 ArrayBuffer
      } else {
        reject(new Error('Failed to read file as ArrayBuffer'));
      }
    };
    reader.onerror = (e) => {
      reject(e);
    };
  });
};

const handleUpload = async (file) => {
  const rawData = await getXlsxData(file); // 假设 getXlsxD
  dialogData.value = rawData;
  tableHeaders.value = Object.keys(rawData[0] || {});
  showDialog.value = true;
}

//读取表格数据
const getXlsxData = async (file) => {
  const dataBinary = await readFile(file);
  const uInt8Array = new Uint8Array(dataBinary);
  console.log("Uint8Array content:", uInt8Array);
  const workBook = XLSX.read(uInt8Array, {type: 'array'});
  const workSheet = workBook.Sheets[workBook.SheetNames[0]];
  const data = XLSX.utils.sheet_to_json(workSheet);
  const newData = data.slice(0, data.length);
  return newData;
};
const close = () => {
  showDialog.value = false;
}

watch(selDate, (newVal) => {
  console.log(dayjs(newVal).format("YYYY-MM-DD"));
})

const getDayData = () => {
  $api.LongRangeQueryRangeData().then(res => {
    tableData.value = res;
  })
}
</script>

<style lang="scss" scoped>
.import {
  font-size: 20px;
}

.title {
  font-size: 20px;
  color: #555555;
  font-weight: bold;
}

.chart-box {
  height: 500px;
}
</style>